<template>
  <div class="photo-wall">
    <div v-if="canEdit">
      <el-upload
        list-type="picture-card"
        v-model:file-list="fileList"
        :headers="headers"
        :action="uploadPhotoWallURL"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-upload="beforeUpload"
        :on-success="handleSuccess"
      >
        <el-icon><Plus /></el-icon>
      </el-upload>
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogData.url" :alt="dialogData.desc" />
        <el-input v-model="dialogData.desc" class="edit-desc"></el-input>
        <el-button type="primary" class="edit-desc" @click="handleUpdateDesc"
          >修改描述</el-button
        >
      </el-dialog>
    </div>
    <div
      class="photo"
      v-for="photo in photos"
      v-else-if="(photos || []).length > 0"
    >
      <el-image
        style="width: 100px; height: 100px"
        :src="photo.url"
        :zoom-rate="1.2"
        :preview-src-list="srcList"
        fit="cover"
      />
      <span>{{ photo.desc }}</span>
    </div>
    <div v-else class="empty">
      <el-empty description="暂时没有照片捏" />
    </div>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import { getLoggedUser } from "../utils/stateUtils";
import {
  uploadPhotoWallURL,
  deletePhotoWall,
  updatePhotoDesc,
} from "../api/userAPI";

const props = defineProps({
  photos: Array,
});
const route = useRoute();
const canEdit = computed(() => route.name === "user-center");
const headers = { token: getLoggedUser()?.token || "null" };
const srcList = computed(() => props.photos.map((it) => it.url));

const dialogData = ref();
const dialogVisible = ref(false);
const fileList = ref();

onMounted(() => {
  fileList.value = props.photos;
});

const handleRemove = (uploadFile) => {
  deletePhotoWall(uploadFile.id).then((data) => {
    if (data.success) {
      ElMessage.success(data.message);
    } else {
      ElMessage.error(data.message);
    }
  });
};

const handlePreview = (uploadFile) => {
  dialogData.value = uploadFile;
  dialogVisible.value = true;
};

const beforeUpload = (rawFile) => {
  if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
    ElMessage.error("支支持 jpg 或 png 格式的图片");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("图片大小不能超过 2MB!");
    return false;
  }
  return true;
};

const handleSuccess = (response) => {
  if (response.success) {
    ElMessage.success(response.message);
    window.location.reload();
  } else {
    ElMessage.error(response.message);
  }
};

const handleUpdateDesc = () => {
  updatePhotoDesc(dialogData.value.id, dialogData.value.desc).then((data) => {
    if (data.success) {
      ElMessage.success(data.message);
    } else {
      ElMessage.error(data.message);
    }
  });
};
</script>

<style scoped>
.photo-wall {
  display: flex;
  flex-wrap: wrap;
  justify-items: center;
  justify-content: flex-start;
}
.photo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 8px;
  margin-left: 8px;
}
.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.edit-desc {
  margin-top: 10px;
}
</style>
